<template>
    <view class="container">
        <NavBar title="项目材料" @back="goBack" />
        <!-- 标签 -->
        <view class="top-box" style="padding: 24rpx 16rpx; color: #999; font-size: 28rpx; border-bottom: 1rpx solid #f2f2f2;">
            <view style="display: flex; justify-content: space-around; margin-bottom: 16rpx;">
                <text>编码：<text style="color: #409EFF;">{{paramsData.code}}</text></text>
                <text>名称：<text style="color: #409EFF;">{{paramsData.name}}</text></text>
            </view>
            <view style="display: flex; justify-content: space-around;">
                <text style="margin-left: -20rpx;">规格：<text style="color: #409EFF;">{{paramsData.specs}}</text></text>
                <text>单位：<text style="color: #409EFF;">{{paramsData.unit}}</text></text>
            </view>
        </view>
        <uv-sticky bgColor="#fff" class="tab-sticky">
            <uv-tabs :list="tabList" @click="tabClick" lineWidth="65" customStyle="line-height: 90rpx;"
                :scrollable="false">
            </uv-tabs>
        </uv-sticky>
        <scroll-view refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' scroll-y class="list" @scrolltolower="scrolltolower" v-if="tabIndex == 1">
			<uv-empty mode="data" text="暂无数据" v-if="formList.length==0 && isempty" ></uv-empty>
            <view class="list-item" v-for="item in formList" :key="item.id">

                <view class="item-content">
                    <text class="text-left">合同</text>
                    <text class="text-right">{{ item.contractName }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">合同/地材加工商</text>
                    <text class="text-right">{{ item.materialName }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">领用周期</text>
                    <text class="text-right">{{ item.cycleName }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">供应商</text>
                    <text class="text-right">{{ item.supplierName }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">材料单价</text>
                    <text class="text-right">{{ item.unitPrice }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">领用单价</text>
                    <text class="text-right">{{ item.drawUnitPrice }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">数量</text>
                    <text class="text-right">{{ item.num }}</text>
                </view>
                <view class="item-content">
                    <text class="text-left">领用时间</text>
                    <text class="text-right">{{ item.createTime }}</text>
                </view>
            </view>
        </scroll-view>
        <scroll-view refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' scroll-y class="list" @scrolltolower="scrolltolowerstore" v-if="tabIndex == 2">
			<uv-empty mode="data" text="暂无数据" v-if="storeList.length==0" ></uv-empty>
            <template v-if="storeList.length > 0">
                <view class="list-item" v-for="item in storeList" :key="item.id">
                    <!-- <view class="item-content">
                        <text class="text-left">合同</text>
                        <text class="text-right">{{ item.contractName }}</text>
                    </view>
                    <view class="item-content">
                        <text class="text-left">合同/地材加工商</text>
                        <text class="text-right">{{ item.materialName }}</text>
                    </view> -->
                    <view class="item-content">
                        <text class="text-left">入库单号</text>
                        <text class="text-right">{{ item.enterCode }}</text>
                    </view>
                    <view class="item-content">
                        <text class="text-left">供应商</text>
                        <text class="text-right">{{ item.supplierName }}</text>
                    </view>
					<view class="item-content">
					    <text class="text-left">入库时间</text>
					    <text class="text-right">{{ item.enterTime }}</text>
					</view>
                    <view class="item-content">
                        <text class="text-left">单价</text>
                        <text class="text-right">{{ item.unitPrice }}</text>
                    </view>
                    <view class="item-content">
                        <text class="text-left">数量</text>
                        <text class="text-right">{{ item.num }}</text>
                    </view>
                    <!-- <view class="item-content">
                        <text class="text-left">领用时间</text>
                        <text class="text-right">{{ item.createTime }}</text>
                    </view> -->
                </view>
            </template>
            <!-- <template v-else>
                <view class="list-item">
                    <view class="item-content">
                        <text class="text-left">暂无入库记录</text>
                    </view>
                </view>
            </template> -->
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import {
    getMaterialDrawItem,
    getMaterialSingle
} from '@/utils/app.js'
export default {
    components: { NavBar },
    data() {
        return {
			isempty:false,
			refresh:false,
            formList: [],
            storeList: [],
            tabList: [
                {
                    name: '领用记录',
                    value: 1
                },
                {
                    name: '入库记录',
                    value: 2
                }
            ],
            tabIndex: 1,
            paramsData: {},
			pageNum:1,
			total:''
        };
    },
    onLoad(options) {
		console.log(options);
        if (options.data) {
            const parsedData = JSON.parse(decodeURIComponent(options.data));
            this.paramsData = parsedData
			console.log(parsedData);
            this.getMaterialDrawItemData()
        }
    },

    onPullDownRefresh() {
        this.getMaterialDrawItemData()
    },
    methods: {
		async refresherrefresh(){
			this.pageNum=1
			this.refresh = true
			if(this.tabIndex==1){
				this.formList=[]
				await this.getMaterialDrawItemData()
				this.refresh = false
			}else{
				this.storeList=[]
				await this.getMaterialSingleData()
				this.refresh = false
			}
		},
		scrolltolower(){
			if(this.formList.length>=this.total) return
			this.pageNum++
			this.getMaterialDrawItemData()
		},
		scrolltolowerstore(){
			if(this.storeList.length>=this.total) return
			this.pageNum++
			this.getMaterialSingleData()
			console.log(1111);
		},
        goBack() {
            uni.navigateBack({
                delta: 1
            })
        },
        tabClick(e) {
			this.pageNum = 1
            this.tabIndex = e.value
            if (e.value == 1) {
				this.formList=[]
                this.getMaterialDrawItemData()
            } else {
				this.storeList=[]
                this.getMaterialSingleData()
            }
        },
        //领用详情
        getMaterialDrawItemData() {
			uni.showLoading({
				title: "加载中",
				mask: true
			});
			let params = {'materialProjectId': this.paramsData.id}
		    const data = this.serializeParams({
                // materialProjectId: this.paramsData.id,
                // code: this.paramsData.code,
				params:params,
                pageNum: this.pageNum,
                pageSize: 10
            })
			console.log(data);
            getMaterialDrawItem(data).then(res => {
				uni.hideLoading();
                if (res && res.code == 200) {
                    this.formList = [...this.formList,...res.rows]
					if(this.formList.length==0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					this.total = res.total
                }
            })
        },
        //入库详情
        getMaterialSingleData() {
			uni.showLoading({
				title: "加载中",
				mask: true
			});
			const data = this.serializeParams({
				pageNum: this.pageNum,
				pageSize: 10,
				params:{
					projectId:this.paramsData.projectId,
					enterState:1
				},
				code:this.paramsData.code,
			})
            getMaterialSingle(data).then(res => {
				uni.hideLoading();
                if (res && res.code == 200) {
                    this.storeList = [...this.storeList,...res.rows]
					this.total = res.total
                }
            })
        },
		serializeParams(params) {
				  const result = [];
				  for (const key in params) {
				    if (params.hasOwnProperty(key)) {
				      const value = params[key];
				      // 如果值是对象，将其转换为[key][subKey]=value的形式
				      if (typeof value === 'object' && value !== null) {
				        for (const subKey in value) {
				          if (value.hasOwnProperty(subKey)) {
				            result.push(
				              encodeURIComponent(`${key}[${subKey}]`) +
				              '=' +
				              encodeURIComponent(value[subKey])
				            );
				          }
				        }
				      } else {
				        // 普通参数直接序列化
				        result.push(
				          encodeURIComponent(key) + '=' + encodeURIComponent(value)
				        );
				      }
				    }
				  }
				  return result.join('&');
				}
    }
}
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}

.container {
    background-color: #E6EAF3;
}

::v-deep .tab-sticky {
    top: 0 !important;
}
.top-box{
	font-size: 30rpx !important;
}
.list {
    height: calc(100vh - 410rpx);
    background-color: #fff;
    background-color: #E6EAF3;

    .list-item {
        margin: 20rpx auto 0;
        padding: 48rpx;
        width: 700rpx;
        background-color: #fff;
        border-radius: 32rpx;
    }

    .item-content {
		display: flex;
		align-items: center;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #72767C;
    }

    .text-left {
        margin-right: 16rpx;
        width: 230rpx;
		text-align: right;
		font-size: 30rpx;
    }

    .text-right {
        margin-left: 16rpx;
        width: 350rpx;
		font-size: 30rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
		text-align: left;
    }
}
</style>
